import React, { Component } from 'react'
import {nanoid} from 'nanoid'

export default class Header extends Component {
    handleKeyup= (event) =>{
        const {target,keyCode} =event
        //是否按下enter键
        if(keyCode !==13) return;
        //输入不能为空
        if(target.value == null){
            alert('输入不能为空')
            return
        }
        const todoObj = {id:nanoid(),name:target.value,done:false}
        this.props.addData(todoObj);
        target.value=''
    }
    render() {
        return (
            <div className="todo-header">
              <input type="text" onKeyUp={this.handleKeyup} placeholder="请输入你的任务名称，按回车键确认"/>
            </div> 
        )
    }
}
